<template>
  <div class="footer-container">

    <van-grid clickable
              :column-num="4">
      <van-grid-item icon="home-o"
                     text="路由跳转"
                     to="/" />
      <van-grid-item icon="home-o"
                     text="路由跳转"
                     to="/" />
      <van-grid-item icon="home-o"
                     text="路由跳转"
                     to="/" />
      <van-grid-item icon="home-o"
                     text="登录"
                     to="/login" />

    </van-grid>

  </div>
</template>

<script>
export default {
  name: 'appFooter'
}
</script> <style lang="less" scoped>
.footer-container {
  // 设置宽度和高度
  height: 60px;
  width: 100%;
  // 设置背景颜色和顶边框颜色
  background-color: white;
  border-top: 1px solid #efefef;
  // 底部固定定位
  position: fixed;
  bottom: 0;
  left: 0;
  // 内部元素的对齐方式
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 设置左右 padding
  // padding: 0 10px;

  .van-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 60px;
    height: 60px;

    .van-grid-item {
      height: 60px;
    }
  }
}
</style>
